<template>

  <div>

    <el-header style="text-align: right; background-color:#CD5C5CFF;padding-right:80px">

      <el-menu style="text-align: right;"
               class="el-menu-demo"
               mode="horizontal"
               :default-active="'1'"
               background-color="#CD5C5CFF"
               text-color="#fff"
               active-text-color="#ffd04d">
        <el-menu-item index="1">首页</el-menu-item>
        <el-menu-item index="2" @click="toPassenger">旅客中心</el-menu-item>

        <el-dropdown v-if="isLogin" style="color:white">
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="toPassenger">个人中心</el-dropdown-item>
            <el-dropdown-item @click.native="changePassenger">切换账号</el-dropdown-item>
            <el-dropdown-item @click.native="logOut">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span v-if="isLogin" style="color:gold">你好&nbsp;{{ passenger.passengerName }}</span>&nbsp;&nbsp;
        <el-button v-if="isLogin==false" type="warning" plain @click="$router.push('/passengerLogin')">登录</el-button>
      </el-menu>


    </el-header>

    <el-main>
      <div style="text-align: center">
        <div>
          <el-form :model="flightForm" ref="flightForm">
            <el-select class="srcCity"
                       v-model="flightForm.srcCity"

                       filterable
                       allow-create
                       default-first-option
                       placeholder="出发城市">
              <el-option
                v-for="(item,index) in cities"
                :key="index"
                :value="item">
              </el-option>

            </el-select>&nbsp;
            <el-select class="dstCity"
                       v-model="flightForm.dstCity"
                       filterable
                       allow-create
                       default-first-option
                       placeholder="目的城市">
              <el-option
                v-for="(item,index) in cities"
                :key="index"
                :value="item">
              </el-option>
            </el-select>&nbsp;

            <el-date-picker
              v-model="flightForm.startTime"
              type="date"
              placeholder="选择出发时间"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd">
            </el-date-picker>&nbsp;


            <el-button v-on:click="submitForm('flightForm')" type="danger">查询</el-button>&nbsp;
            <el-button v-on:click="resetForm('flightForm')">重置</el-button>


          </el-form>
          <br>


          <div class="container mar-bottom-30 " v-if="flights.length>0">
            <div class="hangbanlist" v-for="(flight,index) in flights" :key="index">
              <div>
                <!-- 表头 -->
                <ul class="list-inline bor-bottom-solid-1  ">
                  <li class="w-percentage-25"><i class="icon iconfont icon-feiji2"
                                                 style="width:80px;height:80px; color:indianred;"></i>
                    <strong>航班</strong> {{ flight.id }}<span
                      class="gray-999 font12 mar-left-10">机型：{{ flight.sizeStr }}</span></li>
                  <li class="text-right w80"><strong class="time">{{ timeFormat(flight.startTime) }}</strong></li>
                  <li class="text-right w80"><strong class="time ">{{ dateFormat(flight.startTime) }}</strong></li>
                  <li class="">——</li>
                  <li class="w80"><strong class="time ">
                    {{ timeFormat(flight.endTime) }}</strong></li>
                  <li class="w80"><strong class="time ">{{ dateFormat(flight.endTime) }}</strong></li>
                  <li class="w100 text-right">{{ flight.srcAirport }}</li>
                  <li class="">——</li>
                  <li class=" w100">{{ flight.dstAirport }}</li>

                </ul>
                <!-- 表头结束 -->
                <!-- 表BODY -->
                <div class="collapse" id="collapseExample" style="display: block;">
                  <div class="hangbanlist-body " style="background-color: #FEFCFC;">
                    <ul class="list-inline">
                      <li class="w-percentage-20"><strong class="blue-0093dd">头等舱(F)</strong></li>
                      <li class="w-percentage-25">座位数:&nbsp;{{ flight.advancedNum }}</li>
                      <li class="w-percentage-25">剩余:&nbsp;{{ flight.advancedNum - flight.advancedCount }}</li>
                      <li class="w-percentage-20 ">
                        优惠价:&nbsp;
                        <strong class="rmb orange-f60 font16">￥{{ flight.advancedPrice }}</strong></li>

                      <li class="pull-right ">
                        <button class="btn btn-danger btn-sm" @click="toConfirmBook1(flight.id,1)">订票</button>
                      </li>
                    </ul>

                    <ul class="list-inline">
                      <li class="w-percentage-20"><strong class="blue-0093dd">经济舱(E)</strong></li>
                      <li class="w-percentage-25">座位数:&nbsp;{{ flight.economicNum }}</li>
                      <li class="w-percentage-25">
                        剩余:&nbsp;{{ flight.economicNum - (flight.seatCount - flight.advancedCount) }}
                      </li>
                      <li class="w-percentage-20 ">优惠价:&nbsp;<strong
                        class="rmb orange-f60 font16">￥{{ flight.economicPrice }}</strong></li>
                      <li class="pull-right ">

                        <button class="btn btn-danger btn-sm" @click="toConfirmBook1(flight.id,2)">订票</button>

                      </li>
                    </ul>
                  </div>
                </div>
                <!-- 表BODY 结束 -->
              </div>
            </div>

            <!--显示分页信息-->


          </div>
        </div>
      </div>
      <br>
    </el-main>


  </div>


</template>

<style>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>

<script>
import {formatDate} from "../common/date";

export default {


  data() {
    return {

      isLogin: false,
      Visiable: false,
      dataVisible: false,
      cities: [
        "开放端口",
        "newYork"
      ],
      flightForm: {
        srcCity: '',
        dstCity: '',
        startTime: '',
        isManager: 'false'

      },
      passenger: {
        psengerId: null,
        cardId: null,
        passengerName: null,
        phone: null,
        password: null,
        avatarImg: null,
        nickName: null,
        city: null,
        email: null,
        wechat: null,
      },
      flights: [],
      startTime: ''

    }

  },
  created() {
    const _this = this
    this.$axios.get("http://localhost:8181/flight/loadCity")
      .then((resp) => {
        _this.cities = resp.data
      })

    console.log(this.flightForm.startTime)

    this.$axios.post('http://localhost:8181/flight/getFlightsByPassenger', this.flightForm)
      .then(function (resp) {
        _this.flights = resp.data
        console.log(_this.flights)
      })


  },
  mounted() {
    let passenger = JSON.parse(sessionStorage.getItem('passenger'))
    if (passenger) {
      this.passenger = passenger
      this.isLogin = true
    }
  },

  methods: {
    logOut() {
      sessionStorage.removeItem('passenger')
      this.passenger = {}
      this.isLogin = false
    },
    changePassenger() {
      this.$router.push('/passengerLogin')
    },


    submitForm(formName) {
      const _this = this
      console.log(this.flightForm.startTime)

      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios.post('http://localhost:8181/flight/getFlightsByPassenger', this.flightForm)
            .then(function (resp) {
              _this.flights = resp.data
              console.log(_this.flights)
            })
        }

      })
    },
    resetForm(formName) {
      this.flightForm.startTime = null;
      this.flightForm.srcCity = null;
      this.flightForm.dstCity = null;
    },
    timeFormat(time) {
      var date = new Date(time);
      return formatDate(date, "hh:mm");
    },
    dateFormat(day) {
      var date = new Date(day);
      return formatDate(date, "MM-dd");
    },


    toConfirmBook() {
      window.location.href = "http://localhost:8081/showBooks"
      // const router = this.$router.resolve({
      //   path: '/showBooks',
      //   query: { pid: this.flights }
      // })
      // window.open(router.href, '_blank')

    },
    toConfirmBook1(flightId, seatType) {
      //使用params传参，不能用path，要用name
      this.$router.push({path: '/confirmBook', query: {flightId: flightId, seatType: seatType}})
    },

    toPassenger() {
      window.location.href = "http://localhost:8081/passenger"
    },
    toManager() {
      // if(1>0){
      //   window.open("http://localhost:8080/managerLogin",null,"height=600, width=500, top=600,left=800,status=yes,toolbar=no,menubar=no");
      // }
      // else{
      window.location.href = "http://localhost:8081/manager"

      // }
    },


  },


}
</script>
<style>
.bookButton {
  color: white;
  border: none;
  background-color: #ec4b2c;

}


</style>
